<script setup lang="ts">
import {reactive, ref} from 'vue'
import {Lock, UserFilled} from "@element-plus/icons-vue";
import type {FormItemProps} from "element-plus";
import {useRouter} from "vue-router";
import { h } from 'vue'
import { ElNotification } from 'element-plus'

const router = useRouter();

const itemLabelPosition = ref<FormItemProps['labelPosition']>('top')
const form = reactive({
  stuNum: '',
  region: '',
  password: '',
  confirmPassword: '',
})

const onSubmit = () => {
  ElNotification({
    title: '注册成功',
    message: h('i', { style: 'color: green' }, '即将前往主页'),
    type: 'success',
  })
}
const onReset = () => {
  router.push({name: 'login'})
}
</script>

<template>
    <div class="registerForm">
      <el-form
                    :model="form"
          label-width="6px"
          style="max-width: 600px">
        <el-form-item label="学号" :label-position="itemLabelPosition">
          <el-input v-model="form.stuNum" >
            <template #suffix>
              <el-icon>
                <UserFilled/>
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="地区" :label-position="itemLabelPosition">
          <el-select v-model="form.region" placeholder="请选择您的地区">
            <el-option label="上海" value="shanghai" />
            <el-option label="北京" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="密码" :label-position="itemLabelPosition">
          <el-input
              v-model="form.password"
              type="password"
              placeholder="请输入密码"
              show-password
          >
            <template #suffix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="确认密码" :label-position="itemLabelPosition">
          <el-input
              v-model="form.confirmpassword"
              type="password"
              placeholder="请输入确认密码"
              show-password
          >
            <template #suffix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button @click="onReset">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>

<style scoped>
  .registerForm{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

  }
  .el-form-item {
    min-width: 500px;
  }
</style>


